//
//  SplitView.swift
//  animations
//
//  Created by Ekaterina on 09.01.2023.
//

import SwiftUI

struct SplitView: View {
    private let listItems = [
        ListItem(name: "First Item", image:"RedImage", sub: [
            ListItem(name: "First Sub Item 1", image:"PinkImage"),
            ListItem(name: "First Sub Item 2", image:"BlueImage"),
            ListItem(name: "First Sub Item 3", image:"GreenImage"),
            ListItem(name: "First Sub Item 4", image:"PinkImage"),
            ListItem(name: "First Sub Item 5", image:"GreenImage")]),
        ListItem(name:"Second Item", image: "BlueImage", sub:[
            ListItem(name: "Second Sub Item 1", image:"RedImage"),
            ListItem(name: "Second Sub Item 2", image:"PinkImage"),
            ListItem(name: "Second Sub Item 3", image:"BlueImage"),
            ListItem(name: "Second Sub Item 4", image:"PinkImage"),
            ListItem(name: "Second Sub Item 5", image:"BlueImage"),
            ListItem(name: "Second Sub Item 6", image:"PinkImage"),
            ListItem(name: "Second Sub Item 7", image:"GreenImage")]),
        ListItem(name: "Third Item", image:"RedImage", sub: [
            ListItem(name: "Third Sub Item 1", image:"BlueImage"),
            ListItem(name: "Third Sub Item 2", image:"PinkImage"),
            ListItem(name: "Third Sub Item 3", image:"GreenImage")])]
    
    @State private var selectedItem: ListItem.ID?
    @State private var selectedSub: ListItem?
    
    @State private var columnVisibility = NavigationSplitViewVisibility.automatic;
    
    var body: some View {
        NavigationSplitView(columnVisibility: $columnVisibility) {
            List(listItems, selection: $selectedItem) { item in
                NavigationLink(value: item) {
                    HStack {
                        Image(item.image ?? "")
                            .resizable()
                            .scaledToFit()
                            .frame(maxWidth: 24)
                        Text(item.name)
                    }
                }
            }
            .listStyle(.plain)
            .navigationBarTitleDisplayMode(.inline)
        } content: {
            if let selectedItem,
               let subItems = listItems.first(where: {$0.id == selectedItem})?.sub {
                List(subItems, selection: $selectedSub) { subItem in
                    NavigationLink(value: subItem) {
                        HStack {
                            Image(subItem.image ?? "")
                                .resizable()
                                .scaledToFit()
                                .frame(maxWidth: 24)
                            Text(subItem.name)
                        }
                    }
                    .tag(subItem)
                }
                .listStyle(.plain)
                .navigationBarTitleDisplayMode(.inline)
            }
            else {
                Text("Please select an item to view content")
            }
        } detail: {
            if let selectedSub {
                Image(selectedSub.image ?? "")
                    .resizable()
                    .scaledToFit()
                    .padding(32)
            }
            else {
                Text("Please select an item to view details")
            }
        }
        .navigationSplitViewStyle(.automatic)
        .navigationTitle("Navigation Split View")
    }
}

private struct ListItem: Identifiable, Hashable {
    var id = UUID()
    var name: String
    var detail: String?
    var image: String?
    var sub: [ListItem]?
}

struct SplitView_Previews: PreviewProvider {
    static var previews: some View {
        SplitView()
    }
}
